<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <title>Single</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="icon" th:href="@{/ico/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}" type="text/css" media="all" />
	<link rel="stylesheet" href="../static/css/my-style.css" th:href="@{/css/my-style.css}" type="text/css">
	<link rel="stylesheet" href="../static/css/single.css" th:href="@{/css/single.css}">
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://at.alicdn.com/t/font_1812647_baid87hyd3d.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <!-- //Fonts -->
	<script type="text/javascript" src="../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
		
	

</head>
<body>

    <div class="main-sec inner-page">
        <!-- //header -->
        <header th:replace="_fragments :: menu(3)" class="py-sm-3 pt-3 pb-2" id="home">
            <div class="container">
                <!-- nav -->
                <div class="top-w3pvt d-flex">
                    <div id="logo">
                        <h1> <a href="index.html"><span class="log-w3pvt">B</span>aggage</a> <label class="sub-des">Online Store</label></h1>
                    </div>

                    <div class="forms ml-auto">
						<span class="avatar">
							<span>用户名</span>
						</span>
                        <a href="login.html" class="btn"><span class="fa fa-user-circle-o"></span> 登录</a>
                        <a href="register.html" class="btn"><span class="fa fa-pencil-square-o"></span> 注册</a>
                    </div>
                </div>
                <div class="nav-top-wthree">
                    <nav>
                        <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                        <input type="checkbox" id="drop" />
                        <ul class="menu">
                            <li><a href="index.html">主页</a></li>
                            <li><a href="about.html">关于我们</a></li>
                            <li class="active">
                                <!-- First Tier Drop Down -->
                                <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                                </label>
                                <a href="#">系列 <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                                <input type="checkbox" id="drop-2" />
                                <ul>
                                    <li><a href="about.html" class="drop-text">特色</a></li>
                                    <li><a href="goods.html" class="drop-text">热卖</a></li>

                                </ul>
                            </li>

                            <li><a href="shop.html">商品</a></li>
                            <li><a href="contact.html">联系我们</a></li>
							<li><a href="shopcar.html">购物车</a></li>
                        </ul>
                    </nav>
                    <!-- //nav -->
                    <div class="search-form ml-auto">
                        <div class="form-w3layouts-grid">
                            <form action="#" method="post" class="newsletter">
                                <input class="search" type="search" placeholder="Search here..." required="">
                                <button class="form-control btn" value=""><span class="fa fa-search"></span></button>
                            </form>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </header>
        <!-- //header -->
    </div>
    <!-- //banner-->
    <!--/banner-bottom -->
    <section class="banner-bottom py-5">
        <div class="container py-md-5">
            <!-- product right -->
            <div class="left-ads-display wthree">
                <div class="row">
                    <div class="desc1-left col-md-6">
                        <img src="../static/images/bag1.png" th:src="@{/images/bag1.png}" class="img-fluid" alt="">
                    </div>
                    <div class="desc1-right col-md-6 pl-lg-3">
                        <input type="hidden" name="id" th:value="${goods.id}"/>
                        <h3 class="name" th:text="${goods.goodsName}" style="color: red; font-weight: bold;">女士钱包</h3>
                        <h5 class="pd-min">金额：<span class="price" th:text="${goods.goodsPrice}">699</span></h5>

						<h5 class="pd-min">重量：<span class="weight" th:text="${goods.goodsWeight}">1.3</span>kg</h5>
						<h5 class="pd-min">规格：<span>无</span></h5>
						<div class="pd-min">
							<h5  style="display: inline-block;!important">颜色:</h5>
							<div class="mar-min goods-color"  th:attr="data-num=${goodscolor.num}" th:each="goodscolor :${goods.colorList}" th:text="${goodscolor.color}">黄色</div>
                            <div class="mar-min goods-color" th:if="${#arrays.isEmpty(goods.colorList)}" >红色</div>
						</div>
						<div id="goods-num" class="pd-min">
							<h5>数量:</h5>
							<input class="form-control mar-min" name="num" oninput = "value=value.replace(/[^\d]/g,'')" type="text" value="1">
							<span >库存<span class="store" th:text="${goods.stock.num}">4646</span>件</span>
						</div>
						
                        <div class="available mt-3">
                            <button class="btn submit">加入购物车</button>
                        </div>
						<h5 class="pd-nor ft-min">温馨提示·支持7天无理由退货</h5>
                    </div>

                </div>
                <div class="row sub-para-w3pvt my-5">
                    <h3 class="shop-sing" th:text="${goods.goodsTitle}">优雅名媛范</h3>
                    <p class="mt-3 italic-blue" th:text="${goods.goodsDescription1}">几何轮廓交织出温婉的画面，浅浅的跃动投影在包包的每处细节，用翅膀与挂饰拼凑出多彩魅力，每一个包包都深藏一个全新的自己。出挑的色彩、考究的造型，侧边蝴蝶式设计一增加容纳量，隐藏型按扣开合，更新爱你大气时髦。</p>
                    <p class="mt-3" th:text="${goods.goodsDescription2}">翅膀的包型一直受上班族欢迎的，至今成为每个季节必推包款之一，今年大胆染上艳丽色调，让时髦的上班包更舔潮流气味。</p>
                </div>


                <!--/row-->
                <h3 class="title-wthree-single my-lg-5 my-4 text-left">推荐</h3>
                <div class="row shop-wthree-info text-center">
                    <div th:each="goodsRecommend :${recommendsList}" class="col-md-3 shop-info-grid text-center mt-4">
                        <div class="product-shoe-info shoe">
                            <div class="men-thumb-item">
								<a href="goods.html" th:href="@{/goods(id=${goodsRecommend.id})}">
									<img src="../static/images/b1.jpg" th:src="${goodsRecommend.goodsImg}" class="img-fluid" alt="">
								</a>
                            </div>
                            <div class="item-info-product">
                                <h4>
                                    <a href="goods.html" th:text="${goodsRecommend.goodsName}">Messenger Bag </a>
                                </h4>

                                <div class="product_price">
                                    <div class="grid-price">
                                        ￥<span class="money" th:text="${goods.goodsPrice}">675.00</span>
                                    </div>
                                </div>
                                <ul class="stars">
                                    <li><a href="#"><span class="fa fa-star" aria-hidden="true"></span></a></li>
                                    <li><a href="#"><span class="fa fa-star" aria-hidden="true"></span></a></li>
                                    <li><a href="#"><span class="fa fa-star-half-o" aria-hidden="true"></span></a></li>
                                    <li><a href="#"><span class="fa fa-star-half-o" aria-hidden="true"></span></a></li>
                                    <li><a href="#"><span class="fa fa-star-o" aria-hidden="true"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </section>

    <!-- /banner-bottom -->
    <!--/newsletter -->
    <section class="newsletter-w3pvt py-5">
        <div class="container py-md-5">
            <form method="post" action="#">
                <p class="text-center">订阅手袋商店的邮件列表，以获取最新的新品、特别优惠和其他折扣信息。</p>
               <div class="row subscribe-sec">
                    <div class="col-md-9">
                        <input type="email" class="form-control" id="email" placeholder="输入你的邮箱.." name="email" required="">

                    </div>
                    <div class="col-md-3">

                        <button type="submit" class="btn submit">订阅</button>
                    </div>

                </div>
            </form>
        </div>
    </section>
    <!--//newsletter -->
    <!--/shipping-->
	<section class="shipping-wthree">
        <div class="shiopping-grids d-lg-flex">
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"><span class="fa fa-truck" aria-hidden="true"></span>
                </div>
                <div class="icon-gd-info">
                    <h3>免费送货</h3>
                    <p>所有订单超过2000元</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd sec text-center">
                <div class="icon-gd"><span class="fa fa-bullhorn" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>免费返回</h3>
                    <p>30天内第一次兑换</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"> <span class="fa fa-gift" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>会员折扣</h3>
                    <p>注册,节省29%</p>
                </div>

            </div>
        </div>
	</section>
    <!--//shipping-->
    <!-- footer -->
    <div th:replace="_fragments:: footer" class="footer_agileinfo_topf py-5">
        <div class="container py-md-5">
            <div class="row">
                <div class="col-lg-3 footer_wthree_gridf mt-lg-5">
                    <h2><a href="index.html"><span>B</span>aggage
                        </a> </h2>
                    <label class="sub-des2">Online Store</label>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-4">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="index.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Home</a>
                        </li>
                        <li>
                            <a href="about.html"><span class="fa fa-angle-right" aria-hidden="true"></span> About</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Collections</a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Extra Page</a>
                        </li>

                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span> Terms & Conditions</a>
                        </li>
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop Single</a>
                        </li>
                        <li>
                            <a href="contact.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Contact Us</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="login.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Login </a>
                        </li>

                        <li>
                            <a href="register.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Register</a>
                        </li>
                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span>Privacy & Policy</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="w3ls-fsocial-grid">
                <h3 class="sub-w3ls-headf">Follow Us</h3>
                <div class="social-ficons">
                    <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span> Facebook</a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span> Twitter</a></li>
                        <li><a href="#"><span class="fa fa-google"></span>Google</a></li>
                    </ul>
                </div>
            </div>
            <div class="move-top text-center mt-lg-4 mt-3">
                <a href="#home"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
    <!-- //footer -->
    <!-- copyright -->
    <div class="cpy-right text-center py-3">
        <p>Copyright &copy; 2020. 2.2  記憶ミ || 初见ミ</p>
    </div>
    <!-- //copyright -->

</body>

</html>

<script type="text/javascript">

    //颜色
	$(".goods-color").click(function(){
	    //取出选择颜色商品数量
        var goodsnum =$(this).data("num");
        $(".store").text(goodsnum);

		$(".goods-color").each(function(index,element){
			$(element).removeClass("goods-color-active");
		});
		
		$(this).addClass("goods-color-active");
		return;
	});


    $()


    //提交表单
    $(".submit").click(function () {
        //获取商品信息
        var id = $("input[name='id']").val(); //获取商品id
        var name = $(".name").text();  //获取商品名称
        var price = $(".price").text();  //获取商品价格
        var weight = $(".weight").text(); //获取商品重量
        var num = $("input[name='num']").val();  //获取商品数量

        var color = $(".goods-color-active").text();
        //判断颜色是否为空
        if (color == ""){
            alert("请选择颜色！");
            return;
        }
        //判断输入的商品数量是否为空
        if (num == ""){
            alert("请选择商品数量！");
            return;
        }
        //判断输入商品是否合法
        num =parseInt(num);
        if (isNaN(num)){
            alert("商品数量不合法！");
            return;
        }
        //获取当前商品库存
        var this_goods_stock =parseInt($(".store").text());
        if (num > this_goods_stock){
            alert("商品数量超过了库存！");
            $("input[name='num']").val("1");
            return;
        }

        $.ajax({
            url:"getshopcar",
            type:"post",
            data:{id:id, name:name, price:price, num:num, color:color},
            datatype:"json",
            success:function (data) {
                if(data.status == "success"){
                    window.location.href="shopcar";
                }
                else if(data.status == "no-login"){
                    alert(data.msg);
                    window.location.href="login";
                }else
                    alert(data.msg);
            },
            error:function () {

                console.log("请求失败！");
            }
        });
        console.log(id,name,price,weight,num,color);
        return;
    });

</script>